import React, { PureComponent } from "react";
import { FormattedMessage } from "react-intl";
import { Block } from "@design/core";
import TYPE from "@design/constant/component-type";
import messages from "@i18n/messages";
import intl from "react-intl-universal";
import { createTable } from "../utils/create-table";
import { DragDecorator } from "../decorator";

const visualGroup = {
  key: "visual",
  title: <FormattedMessage {...messages.visualComponent} />,
  buttons: [
    {
      title: <FormattedMessage {...messages.textComponent} />,
      key: "text",
      node: () => {
        return Block.create({
          type: TYPE.TEXT,
          data: {
            text: intl.get(messages.textComponent.text.id),
          },
        });
      },
    },
    {
      key: "image",
      title: <FormattedMessage {...messages.imageComponent} />,
      node: () => {
        return Block.create({
          type: TYPE.IMAGE,
          style: { width: "160px", height: "120px" },
        });
      },
    },
    {
      title: <FormattedMessage {...messages.calculateComponent} />,
      key: "calculate",
      node: () => {
        return Block.create({
          type: TYPE.CALCULATE,
          data: {
            start: intl.get(messages.calculateComponent.start.id),
            end: intl.get(messages.calculateComponent.end.id),
            type: "number",
            labelMargin: 10,
            labelAlign: "middle",
            operation: '-',
          },
          style: { width: "70px", height: "20px" },
        });
      },
    },
  ],
};

const inputGroup = {
  key: "input",
  title: <FormattedMessage {...messages.inputComponent} />,
  buttons: [
    {
      title: <FormattedMessage {...messages.textInputComponent} />,
      key: "textInput",
      node: () => {
        return Block.create({ type: TYPE.TEXT_INPUT, data: { type: "text" } });
      },
    },
    {
      title: <FormattedMessage {...messages.selectComponent} />,
      key: "select",
      node: () => {
        return Block.create({
          type: TYPE.SELECT,
          data: { placeholder: "please select one item" },
          style: { width: "150px" },
        });
      },
    },
    {
      title: <FormattedMessage {...messages.radioComponent} />,
      key: "radio",
      node: () => {
        return Block.create({
          type: TYPE.RADIO,
        });
      },
    },
    {
      title: <FormattedMessage {...messages.checkboxComponent} />,
      key: "checkbox",
      node: () => {
        return Block.create({
          type: TYPE.CHECKBOX,
        });
      },
    },
    {
      title: <FormattedMessage {...messages.textAreaComponent} />,
      key: "textArea",
      node: () => {
        return Block.create({ type: TYPE.TEXT_AREA });
      },
    },
    {
      title: <FormattedMessage {...messages.uploadComponent} />,
      key: "upload",
      node: () => {
        return Block.create({
          type: TYPE.UPLOAD,
        });
      },
    },
    {
      title: <FormattedMessage {...messages.queryPickerComponent} />,
      key: "queryPicker",
      node: () => {
        return Block.create({
          type: TYPE.QUERYPICKER,
          data: { 
            columns: [],
            datasource: {
              type: 'dynamic',              
              apiId: "",
            }, 
          },
          style: {
            width: "400px",
            height: "400px",
          },
        });
      },
    },
    {
      title: <FormattedMessage {...messages.datePickerComponent} />,
      key: "datePicker",
      node: () => {
        return Block.create({ 
          type: TYPE.DATEPICKER,
          size: "",
        });
      },
    },
  ],
};

const containerGroup = {
  key: "container",
  title: <FormattedMessage {...messages.containerComponent} />,
  buttons: [
    {
      title: <FormattedMessage {...messages.containerComponent.table} />,
      node: () => {
        return createTable(3, 3);
      },
    },
    {
      title: <FormattedMessage {...messages.dividerComponent} />,
      key: "divider",
      node: () => {
        return Block.create({
          type: TYPE.DIVIDER,
          style: { width: "260px", height: '1px' },
        });
      },
    },
  ],
};

const toolboxOptions = [ visualGroup, inputGroup, containerGroup ];

@DragDecorator()
class ToolboxButton extends PureComponent {
  render() {
    const { connectDragSource, title } = this.props;
    return connectDragSource(<div className="element">{title}</div>);
  }
}

export { ToolboxButton, toolboxOptions };
